import React, { useReducer, useContext } from 'react';
import contextObj from './context';
import Child1 from './Child1';
import Child2 from './Child2';
let { Provider } = contextObj
// 要想实现几个组件共享数据, 需要配合useContext 这个hooks 函数使用
// 将base1组件中的数据共享给它的子组件或者是后代组件使用, 同时 后台组件除了可以获取该
// 祖先组件中的数据还可以使用dispatch 修改该祖先组件中的数据, 后代的几个组件共同管理和维护
// 祖先组件中提供的数据, 这样就实现了一个小型redux 仓库. 
// 以上思路有点类似于状态提升, 将后代组件中使用的共有的数据共同放在祖先组件中, 公共维护管理这个共有状态数据

// 在组件base外边定义当前组件的状态(数据)count, 初始变量
const defaultState = {
    count: 0,
    userinfo: {
        name: "亢振宏",
        age: 20
    }
}

// 定义一个reducer 纯函数去操作该变量
const reducer = (presatte, action) => {
    //参数1: presatte 为原数据 也就是defaultState ,
    //参数2: action 接收dispatch 派发的任务, 根据任务去修改 state数据

    // 注意: 不能直接修改原数据 defaultState, 而是只能修改新数据, 新数据就是将原数据拷贝一份, 
    // 接下来修改newState
    const newState = { ...presatte };
    switch (action.type) {
        case '+':
            newState.count++
            return newState
            break;
        case '-':
            newState.count -= action.payload
            return newState
            break;
        case 'editage':
            newState.userinfo.age = action.payload
            return newState
        case 'editname':
            newState.userinfo.name = action.payload
            return newState
        default: return newState
            break;
    }

}

const Base1 = () => {
    const [state, dispatch] = useReducer(reducer, defaultState);
    // useReducer 返回值为一个数组, 数组第一项就是初始定义的state 数据, 第二项就是dispath方法,
    // 用来修改state数据
    // console.log(1, useReducer(reducer, defaultState))
    return (
        <div>
            <p>使用后usereducer</p>
            <div>
                {/* <button onClick={() => {
                    dispatch({ type: '-', payload: 10 })
                }}>-10</button>
                <span>{state.count}</span>
                <button onClick={() => {
                    dispatch({ type: '+' })
                }}>+1</button> */}

                {/* 将base1组件中的userinfo 对象共享给child1和child2组件使用 */}
                <Provider value={
                    {
                        state,
                        dispatch
                    }
                }>
                    <Child1></Child1>
                    <Child2></Child2>
                </Provider>

            </div>
        </div>
    );
}

export default Base1;
